<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数据绑定</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            声明周期:
            1. 又名:生命周期回调函数, 生命周期函数, 生命周期钩子
            2. 是什么: Vue在关键时刻帮助我们调用的一些特殊名称的函数.
            3. 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的.
            4. 生命周期函数中的this指向是vm或组件实例对象.
         -->
        <div id="root">
            <h2 :style="{opacity}">欢迎哈哈哈哈</h2>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 创建Vue实例，开端
            const vm = new Vue({
                el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                data: {     // data中用于存储数据，数据供el指定的容器去使用
                    opacity: 1
                },
                methods: {
                    
                },
                // Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂在完毕)调用mounted, 只调用一次.
                mounted() {
                    console.log('mounted', this)
                    setInterval(() => {
                        vm.opacity -= 0.01
                        if (vm.opacity <= 0) vm.opacity = 1
                    })
                },
            })

            // 通过外部的定时器实现(不推荐)
            // setInterval(() => {
            //     vm.opacity -= 0.01
            //     if (vm.opacity <= 0) vm.opacity = 1
            // })
        </script>
    </body>
</html>
